import React, { memo, useEffect, useState } from 'react'
import { Space, Table, Tag, message } from 'antd';
import { Button, Checkbox, Form, Input, Select,Popconfirm  } from 'antd';
import { Drawer, Radio } from 'antd';

import { get, add, del, gai, xian ,sou} from './api/shop'
import { useForm } from 'antd/es/form/Form';
const Home = memo(() => {
  // 操作表单数据
  const onFinish = (values) => {
    if (uid == '') {
      add({ ...values, key: Date.now(), id: Date.now(), createTime: Date.now() })
      fn()
    } else {
      gai(uid, { ...values })
      fn()
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const columns = [ 
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '生产日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '成绩',
      dataIndex: 'score',
      key: 'score',
    },

    {
      title: '操作',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, item) => (
        <>
          <Space size="middle">
            <button onClick={async () => {
              setUid(item.id)
              setOpen(true)
              let res = await xian(item.id)

              from.setFieldsValue(res.data)
                }}>修改</button>
                  <Popconfirm
        title="删除"
        description="确认要删除吗"
        onConfirm={async()=>{await del(item.id);fn();message.success('删除成功')}}
          
        okText="确定"
        cancelText="取消"
      > 
        <button>删除</button>
      </Popconfirm>
           
          </Space>

        </>
      ),
    },
    // {
    //   title: 'Action',
    //   key: 'action',
    //   render: (_, record) => (
    //     <Space size="middle">
    //       <a>Invite {record.name}</a>
    //       <a>Delete</a>
    //     </Space>
    //   ),
    // },
  ];

  //存放初始数据
  const [data, setdata] = useState([])
  // 声明一个存放数据的方法
  const fn = async () => {
    let res = await get()
    setdata(res.data)
  }
  // 在这个生命周期里调用获取数据的函数
  useEffect(() => {
    fn()
  }, [])


  // 使用抽屉
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('bottom');
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const onChange = (e) => {
    setPlacement(e.target.value);
  };
  // 来一个值来存放id
  const [uid, setUid] = useState()
  // 声明form实例 
  const [from] = Form.useForm()
  // 搜索数据的函数
 
  // 拿到搜索的数据
   const serch=async(values)=>{
      let res=await  sou(values.name)
       setdata(res.data)
      
   }
  //  搜索的表单实例
    const [sou1]=Form.useForm()
  return (
    <div>
        {/* 模糊搜索部分 */}
       <Form onFinish={serch} form={sou1}>
          <Form.Item name='name'>
          <Input placeholder="搜索姓名"  style={{width:'300px'}}/> 
          
          </Form.Item>
          <Button type="primary" htmlType="submit">
              点击搜索
            </Button>
            <Button onClick={()=>{sou1.resetFields();fn()}}>点击重置</Button>
       </Form>
        <br></br>


      <button onClick={() => { setOpen(true); setUid(''); from.resetFields() }}>新增数据</button>
      {/* 表格 */}
      <Table columns={columns} dataSource={data} key="id" />;
      {/* <Space>
        <Radio.Group value={placement} onChange={onChange}>
          <Radio value="top">top</Radio>
          <Radio value="right">right</Radio>
          <Radio value="bottom">bottom</Radio>
          <Radio value="left">left</Radio>
        </Radio.Group>
        <Button type="primary" onClick={showDrawer}>
          Open
        </Button>
      </Space> */}
      <Drawer
        title="Basic Drawer"
        placement={placement}
        closable={false}
        
        onClose={onClose}
        open={open}
        key={placement}
      >
        {/* 抽屉里面放表单 */}
        <Form
          name="basic"
          form={from}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}

          initialValues={{ sex: '男' }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                // 是否必填
                required: true,
                // 没输入的提示
                message: '请输入姓名',
              },
            ]}
          >
            <Input />
          </Form.Item>


          <Form.Item
            label="成绩"
            name="score"
            rules={[
              {
                required: true,
                message: '请输入成绩',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="年龄"
            name="age"
            rules={[
              {
                required: true,
                message: '请输入年龄',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item

            label="性别"
            name="sex"
            rules={[
              {
                required: true,
                message: '请输入性别',
              },
            ]}
          >
            <Select

              options={[
                { value: "男", label: "男" },
                { value: "女", label: "女" },

              ]}
            />
          </Form.Item>



          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit" onClick={() => setOpen(false)}>
              确认
            </Button>
          </Form.Item>
        </Form>
      </Drawer>

    </div>
  )
})

export default Home